<template>
<view>
<view class="set-mes">          
        <view class="invoice-remarks" :style="'display:' + (invoiceToggle?'none':'flex')">
            <view class>发票抬头 : </view> 
                <radio-group class="radio-group" @change="radioTypeChange">
                    <label v-for="(item, index) in invoicesType" :key="index" class="radio">
                        <radio :value="index" :checked="item.checked"></radio>{{item.name}}
                    </label>
                </radio-group>
            <!-- <input type="text" name="invoice_title" placeholder="单位或个人"/> -->                  
        </view>
        <view class="invoice-remarks" :style="'display:' + (Company?'none':'flex')">
            <view class>单位名称 : </view> <input type="text" @input="nameInfo" :value="name" placeholder="单位名称"></input>
        </view>
        <view class="invoice-remarks" :style="'display:' + (Company?'none':'flex')">
            <view class>纳税人识别号 : </view> <input type="text" @input="numberInfo" :value="numbers" placeholder="纳税人识别号"></input>
        </view>
           <view class="invoice-remarks" :style="'display:' + (Company?'none':'flex')">
            <view class="invoice-text">开企业抬头发票，请准确填写对应的"纳税人识别号"，以免影响您的发票报销. </view> 
        </view>

        <view class="invoice-remarks" :style="'display:' + (invoiceToggles?'none':'flex')">          
            <view class>发票内容 : </view> 
                <radio-group class="radio-group" @change="radioContentChange">
                    <label v-for="(item, index) in invoicesContent" :key="index" class="radio">
                        <radio :value="index" :checked="item.checked"></radio>{{item.name}}
                    </label>
                </radio-group> 
        </view>                        
    </view>
    <button class="use-btn" @tap="submit">确定</button>
</view>
</template>

<script>
// pages/cart/invoice/invoice.js
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      invoicesType: [{
        name: '个人',
        checked: true
      }, {
        name: '单位',
        checked: false
      }],
      invoicesContent: [{
        name: '商品明细',
        checked: false
      }, {
        name: '商品类别',
        checked: false
      }, {
        name: '不开发票',
        checked: true
      }],
      invoicesVlue: 0,
      invoicesVlues: 0,
      Company: true,
      invoiceToggle: false,
      //写发票抬头开关
      invoiceToggles: false,
      //发票内容开关
      invoice_title: '',
      taxpayer: '',
      status: false,
      name: "",
      numbers: "",
      text: "",
      invoice_desc: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let pages = getCurrentPages(); //当前页面

    let prevPage = pages[pages.length - 2]; //上一页面

    if (prevPage.data.invoice_title != '个人') {
      this.setData({
        invoicesVlue: 1
      });
      this.invoicesType[0].checked = false;
      this.invoicesType[1].checked = true;
      this.setData({
        Company: false
      });
    } else if (prevPage.data.invoice_title == '个人') {
      this.setData({
        invoicesVlue: 0
      });
    }

    if (prevPage.data.invoice_desc == '商品明细') {
      this.invoicesContent[0].checked = true;
      this.invoicesContent[1].checked = false;
      this.invoicesContent[2].checked = false;
      this.setData({
        invoicesVlues: 0
      });
    } else if (prevPage.data.invoice_desc == '商品类别') {
      this.invoicesContent[0].checked = false;
      this.invoicesContent[1].checked = true;
      this.invoicesContent[2].checked = false;
      this.setData({
        invoicesVlues: 1
      });
    } else if (prevPage.data.invoice_desc == '不开发票') {
      this.invoicesContent[0].checked = false;
      this.invoicesContent[1].checked = false;
      this.invoicesContent[2].checked = true;
      this.setData({
        invoiceToggle: true,
        Company: true,
        invoicesVlues: 2
      });
    }

    this.setData({
      invoicesType: this.invoicesType,
      invoicesContent: this.invoicesContent,
      name: prevPage.data.invoice_title != '个人' ? prevPage.data.invoice_title : '',
      invoice_title: prevPage.data.invoice_title != '个人' ? prevPage.data.invoice_title : '',
      numbers: prevPage.data.taxpayer,
      taxpayer: prevPage.data.taxpayer
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    radioTypeChange: function (e) {
      this.setData({
        invoicesVlue: e.detail.value,
        status: true
      });

      if (e.detail.value == 1) {
        this.setData({
          Company: false
        });
      } else {
        this.setData({
          Company: true
        });
      }
    },
    radioContentChange: function (e) {
      this.setData({
        invoicesVlues: e.detail.value,
        status: true
      });

      if (e.detail.value == 2) {
        this.setData({
          invoiceToggle: true,
          Company: true
        });
      } else {
        this.setData({
          invoiceToggle: false
        });
        this.invoicesVlue == 1 && this.setData({
          Company: false
        });
      }
    },
    nameInfo: function (e) {
      this.setData({
        invoice_title: e.detail.value,
        status: true
      });
    },
    numberInfo: function (e) {
      this.setData({
        taxpayer: e.detail.value,
        status: true
      });
    },
    submit: function () {
      var that = this;
      var invoice_desc = '';
      var title = that.invoicesVlue == 1 ? that.invoice_title : '个人';

      if (!that.status) {
        uni.navigateBack({
          delta: 1
        });
        return;
      }

      if (that.invoicesVlue == 1 && that.invoicesVlues != 2) {
        if (!that.invoice_title) {
          app.globalData.confirmBox('请输入单位名称');
          return false;
        }

        if (!that.taxpayer) {
          app.globalData.confirmBox('请输入纳税人识别号');
          return false;
        }

        var orgCode = that.taxpayer.substring(6, 9);
        var check = common.orgcodevalidate(orgCode);

        if (!check) {
          app.globalData.confirmBox('请输入正确的纳税人识别号');
          return false;
        }

        if (that.taxpayer.length == 15 || that.taxpayer.length == 18 || that.taxpayer.length == 20) {} else {
          app.globalData.confirmBox('请输入正确的纳税人识别号');
          return false;
        }
      }

      if (that.invoicesVlues == 0) {
        invoice_desc = '商品明细';
      } else if (that.invoicesVlues == 1) {
        invoice_desc = '商品类别';
      } else {
        invoice_desc = '不开发票';
      }

      var postData = {
        invoice_title: title,
        taxpayer: that.taxpayer,
        invoice_desc: invoice_desc
      };
      request.post('/api/cart/save_invoice', {
        data: postData,
        successReload: true,
        success: function (res) {
          if (invoice_desc == '不开发票') {
            var text = invoice_desc;
          } else {
            var text = '纸质 ( ' + title + '-' + invoice_desc + ' )';
          }

          let pages = getCurrentPages(); //当前页面

          let prevPage = pages[pages.length - 2]; //上一页面
          //直接给上移页面赋值 

          prevPage.setData({
            text: text,
            invoice_title: title,
            taxpayer: that.taxpayer,
            invoice_desc: invoice_desc
          });
          uni.navigateBack({
            delta: 1
          });
        }
      });
    }
  }
};
</script>
<style>
/* pages/cart/invoice/invoice.wxss */
.set-mes{
    background-color: #fff;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #444;
    width: 710rpx;
    border-radius: 10rpx;
    margin: 20rpx auto;
    box-sizing: border-box;
}
.set-mes>view{
    display: flex;
    align-items: center;
    height: 92rpx;
    border-bottom: 1px solid #f3f3f3;
}
.set-mes input{
    width: 380rpx;
    height: 50rpx;
    line-height: 50rpx;
    border:1px solid #f3f3f3;
}
.set-btn{
    display: flex;
    font-size: 24rpx;
}
.arrow-rigth{
    width: 32rpx;
    height: 32rpx; 
}
.invoice-text{
    color:red;font-size:12px;
}
.use-btn{
    height: 80rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    font-size:16px;
    width: 710rpx;
    margin: 0 auto;
    border-radius: 10rpx;
}

.invoice-remarks label{
  margin-left: 5rpx;
  display:inline-block;
}
</style>